<template>
    <div class="app-container calendar-list-container">
        <el-select
            clearable
            @keyup.enter.native="getData"
            v-model="listQuery.state"
            placeholder="状态"
            class="filter-item"
            style="width: 150px;margin:7px 15px 7px 0">
            <el-option
                v-for="(item,index) in optionsState"
                :key="index"
                :label="item"
                :value="item">
            </el-option>
        </el-select>
      <!-- filter 条件查询 -->
      <div class="filter-container">
        <el-form :inline="true" ref="form1" :model="listQuery">

            <el-radio v-model="radio" label="1" @change="radioChange">
                <!-- <el-form-item> -->
                    <el-input
                    @keyup.enter.native="getData"
                    clearable
                    style="width: 100px;margin-right:15px;margin-top:10px"
                    v-model="listQuery.orderType"
                    :disabled="radio != '1'"
                    placeholder="工单单别"/>
                <!-- </el-form-item>
                <el-form-item> -->
                    <el-input
                    @keyup.enter.native="getData"
                    clearable
                    style="width: 140px;margin-right:15px;margin-top:10px"
                    v-model="listQuery.workOrderNo"
                    :disabled="radio != '1'"
                    placeholder="起始工单单号"/>
                <!-- </el-form-item>
                <el-form-item> -->
                    <el-input
                    @keyup.enter.native="getData"
                    clearable
                    style="width: 140px;margin-right:15px;margin-top:10px"
                    v-model="listQuery.workOrderNoEnd"
                    :disabled="radio != '1'"
                    placeholder="末端工单单号"/>
                <!-- </el-form-item> -->
            </el-radio>

            <el-radio v-model="radio" label="3" @change="radioChange">
                <el-input
                clearable
                v-model="produceNo"
                style="margin-right:15px;margin-top:10px"
                :style="{ width: inputWid(produceNo) }"
                placeholder="请输入产品品号"
                :disabled="radio != '3'"
                ></el-input>
            </el-radio>

            <el-radio v-model="radio" label="2" @change="radioChange">
                <el-input
                clearable
                v-model="orderPlanNo"
                style="margin-right:15px;margin-top:10px"
                :style="{ width: inputWid(orderPlanNo) }"
                placeholder="请输入计划批号"
                :disabled="radio != '2'"
                ></el-input>
            </el-radio>
            <!-- <el-form-item>
                <el-input
                @keyup.enter.native="getData"
                clearable
                style="width: 150px;margin-right:15px;"
                v-model="listQuery.orderPlanNo"
                placeholder="计划批号"/>
            </el-form-item> -->
            <el-form-item>
                <el-button style="margin-top:10px" type="primary" v-waves icon="el-icon-search" @click="getData">查询</el-button>
            </el-form-item>
         </el-form>
      </div>

        <div style="margin-right: 20px;width:100%;display: flex;align-items: center;" :class="radio == '2' || radio == '3'?'space-between':'flex-end'">
            <el-select
                v-model="orderType"
                placeholder="单别"
                style="margin-right: 20px;width:120px"
                v-if="radio == '2' || radio == '3'"
                @change="orderTypeFilter"
                >
                    <el-option
                    :value="item"
                    :label="item" v-for="(item,index) in this.orderTypeList"
                    :key="index"/>
            </el-select>
            <div>
            <el-select
                clearable
                v-model="printerName"
                placeholder="请选择打印机"
                style="margin-right: 20px"
                @focus="getPrinter"
                >
                    <el-option
                    :value="item"
                    :label="item" v-for="(item,index) in this.printerNameList"
                    :key="index"/>
            </el-select>
            <el-button
            type="button"
            class="el-button el-button--primary"
            @click="printFlowCard"
            round
            size="medium"
            :loading="btnLoading"
            >
            确认打印</el-button
            >
            <el-progress style="margin-left: 10px" :width="50" type="circle" :percentage="percentage" :status="status" v-if="showschedule"></el-progress>
            </div>
        </div>
        <!-- 表格 -->
        <el-form :model="creatForm1" ref="creatForm1">
            <el-table
            :data="creatForm1.tableData"
            border
            v-loading="loading"
            element-loading-text="给我一点时间"
            style="width: 100%;margin-top: 20px"
            :cell-style="{ textAlign: 'center' }"
            :header-cell-style="{ textAlign: 'center' }"
            max-height="700"
            ref="orderData1"
            @selection-change="SelectionChange1"
            @select="selectRow1"
            :row-style="rowstyles"
            >
            <el-table-column type="selection" width="50" fixed="left"></el-table-column>
            <el-table-column label="序号" type="index" align="center" width="60"/>
            <el-table-column prop="orderType" label="工单单别" ></el-table-column>
            <el-table-column prop="workOrderNo" label="工单单号" width="100"></el-table-column>
            <el-table-column prop="technologyNo" label="生产品号" width="100"></el-table-column>
            <el-table-column label="状态" prop="state" align="center">
                <template slot-scope="scope">
                    <div class="fx">
                    {{
                        scope.row.state == 1
                        ? "未生产":
                        scope.row.state == 2
                        ? "已发料":
                        scope.row.state == 3
                        ? "生产中":
                        scope.row.state == 'Y'
                        ? "已完工":
                        scope.row.state == 'y'
                        ? "指定完工":""
                    }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="productName" label="品名" width="150"></el-table-column>
            <el-table-column prop="specification" label="规格" width="150"></el-table-column>
            <el-table-column prop="estimatedOutPut" label="预计产量"></el-table-column>
            <el-table-column prop="orderPlanNo" label="计划批号" width="160"></el-table-column>
            <el-table-column prop="orderTime" label="开单日期"></el-table-column>
            <el-table-column prop="outorderType" label="源工单工别" width="100"></el-table-column>
            <el-table-column prop="outworkOrderNo" label="源工单号" width="100"></el-table-column>
            <el-table-column prop="productionPlanNo" label="生产批号" width="120"></el-table-column>
            <el-table-column prop="texture" label="材质" width="220"></el-table-column>
            <el-table-column prop="thicknessOfPlating" label="板厚" width="180"></el-table-column>
            <el-table-column prop="orderNoType" label="订单单别"></el-table-column>
            <el-table-column prop="orderNo" label="订单单号" width="120"></el-table-column>
            <el-table-column prop="orderNoSerial" label="订单单序"></el-table-column>
            <el-table-column prop="versions" label="版本"></el-table-column>
            <el-table-column prop="godownSum" label="入库仓库"></el-table-column>
            <el-table-column prop="clientNumber" label="客户品号"></el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column prop="estimateYield" label="排产数量"></el-table-column>
            <el-table-column prop="code" label="条码" width="150"></el-table-column>
            <el-table-column label="工艺资料" prop="technologyNoCount" align="center">
                <template slot-scope="scope">
                    <div class="fx">
                    {{
                        scope.row.technologyNoCount
                        ? "已上传":"未上传"
                    }}
                    </div>
                </template>
            </el-table-column>

            </el-table>
        </el-form>

    </div>
</template>

<script>
import { findword02,word02,findZplPrinterInfoList,findZplPrinterInfo } from '../../api/orderAndMachine'
export default {
    name: 'printFlowCard',
    data() {
        return {
            listQuery: {
                page: 1,
                limit: 100000
            },
            creatForm1: {
                tableData: []
            },
            loading: false,
            btnLoading: false,
            printerName: '',
            printerNameList: [],
            dialogFormVisible: false,
            rowSelect1: [],
            subForm1: [],
            percentage: 0,
            timer: '',
            status: '',
            showschedule: false,
            radio: '1',
            orderPlanNo: '',
            orderTypeList: [],
            orderType: '',
            AlltableData: [],
            produceNo: '',
            optionsState: ['未生产','已发料','生产中','已完工','指定完工']
        }
    },
    computed: {
      inputWid() {
        return function (value) {
            if(!value || (value.length <= 10)){
              return '150px'
            } else {
              return (150 + (String(value).length-10)*6) + 'px'
            }
        }
      }
    },
    methods: {
        // 清空缓存
        radioChange(e){
            console.log(e)
            this.listQuery = {
                page: 1,
                limit: 100000
            }
            this.creatForm1.tableData = []
            this.subForm1 = []
            this.rowSelect1 = []
            this.AlltableData = []
        },
        rowstyles({row,rowIndex}){
            if(row.technologyNoCount){
                return {"background": "#dbf1e1"}
            } else {
                return {"background": "#fef0f0"}
            }
        },
        getData(){
            if(this.radio == '1'){
                if(!this.listQuery.orderType || !this.listQuery.workOrderNo || !this.listQuery.workOrderNoEnd) return this.$message.error('工单单别、单号不能为空!')
            } else if(this.radio == '2'){
                if(!this.orderPlanNo) return this.$message.error('计划批号不能为空!')
            } else if(this.radio == '3'){
                if(!this.produceNo) return this.$message.error('产品品号不能为空!')
            }
            // clearInterval(this.timer)
            this.handleFilter()
        },
        async handleFilter() {
            this.loading = true
            this.creatForm1.tableData = []
            let query = Object.assign({},this.listQuery)
             if(this.radio == '2') {
                query.orderPlanNo = this.orderPlanNo
            } else if(this.radio == '3'){
                query.produceNo = this.produceNo
            }
            if(this.listQuery.state) {
                query.state = this.listQuery.state == '未生产'?1:
                              this.listQuery.state == '已发料'?2:
                              this.listQuery.state == '生产中'?3:
                              this.listQuery.state == '已完工'?'Y':
                              this.listQuery.state == '指定完工'?'y':''
            }
            query.isSpray = true
            const data = await findword02(query)
            if(data.code == '2') return this.$message.error(data.msg)
            this.loading = false
            this.btnLoading = false
            this.$message.success(data.msg)
            this.AlltableData = data.data.list
            this.creatForm1.tableData = this.AlltableData.length?JSON.parse(JSON.stringify(this.AlltableData)):[]
            if(!this.creatForm1.tableData.length) return
            if(this.radio == '2' || this.radio == '3'){
                let midorderTypeList = []
                this.AlltableData.forEach(item => {
                    midorderTypeList.push(item.orderType)
                })
                if(midorderTypeList.length){
                    let set = new Set(midorderTypeList)
                    this.orderTypeList = Array.from(set)
                }
                this.orderType = this.orderTypeList[0]
                this.creatForm1.tableData = this.AlltableData.filter(item => item.orderType == this.orderTypeList[0])
            }
        },
        orderTypeFilter(orderType){
            this.creatForm1.tableData = this.AlltableData.filter(item => item.orderType == orderType)
        },
        async printFlowCard(){
            // if(!this.creatForm1.tableData.length) return this.$message.error('打印数据不能为空!')
            if(!this.subForm1.length) return this.$message.error('打印数据不能为空!')
            if(!this.printerName) return this.$message.error('未选打印机!')
            let workNo = []
            this.subForm1.forEach(item => {
                workNo.push({workOrderNo: item.workOrderNo})
            })
            let query = {
                orderType: this.radio == '2' || this.radio == '3'?this.orderType:this.listQuery.orderType,
                workNo: workNo
            }
            // query.printerName = 'HP LaserJet MFP M227-M231 PCL-6 (V4)'          //测试
            query.printerName = this.printerName
            this.btnLoading = true
            // this.showschedule = true
            // this.timer = setInterval(() => {
            //     //需要定时执行的代码
            //     this.getPinterschedule()
            // },10000)
            query.isSpray = true
            const data = await word02(query)
            this.btnLoading = false
            // clearInterval(this.timer)
            if(data.code != '1'){
                this.$message.error(data.msg)
                // this.status = 'exception'
                // setTimeout(this.closeschedule(), 2000)
                return
            }
            this.$message.success(data.msg)
            // this.status = 'success'
            // this.percentage = 100
            // setTimeout(this.closeschedule(), 2000)
        },
        async getPinterschedule(){
            let query = {
                orderType: this.listQuery.orderType,
                workOrderNo: this.listQuery.workOrderNo,
                workOrderNoEnd: this.listQuery.workOrderNoEnd,
            }
            query.isSpray = true
            let data = await findZplPrinterInfo(query)
            this.percentage = data.data.count
        },
        closeschedule(){
            this.showschedule = false
        },
        selectRow1(selection, row) {
            this.rowSelect1 = selection;
        },
        SelectionChange1(select){
            this.rowSelect1 = select;
            this.subForm1 = select;
        },
        async getPrinter(){
            let query = {}
            query.isSpray = true
            const data = await findZplPrinterInfoList(query)
            if(data.code == '1'){
                this.printerNameList = JSON.parse(JSON.stringify(data.data))
                this.printerNameList.forEach((item,index) =>{
                    if(item.indexOf('\\\\')>=0){
                       this.printerNameList[index] = item.split('\\')[3]
                    }
                })
                console.log(this.printerNameList)
            }
        }
    },
     // 在生命周期函数调用"搜索"按钮绑定的函数，显示已有的数据
    mounted() {
        // this.getPrinter()
    },
}
</script>

<style>
    .space-between{
        justify-content: space-between;
    }
    .flex-end{
        justify-content: flex-end;
    }
</style>
